<template>
  <!-- 标签查询 -->
  <div class="box">
    <div class="module1">
      <div v-for="(item, index) in tagsList" class="tag" :class="{ active: selectedIndex === index }">
        <span @click="onClick(index)">{{ item.name }} </span>
      </div>
    </div>
    <!-- 咨询信息 -->
    <el-row gutter="20">
      <el-col v-if="newsTopList.length === 0" class="empty-state" span="24">
        <el-empty description="暂无新闻" />
      </el-col>
      <el-col v-else  :span="4" v-for="(item, index) in newsTopList" :key="index">
        <div class="news-item">
          <div class="news-image-wrapper">
            <img :src="item.cover" alt="新闻图片" v-if="item.cover" />
            <div class="image-placeholder" v-else></div>
          </div>
          <h3 class="news-title">{{ item.name }}</h3>
          <div class="news-meta">
            <span class="news-tags">{{ item.tagName }}</span>
            <span class="news-time">xxx之前</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  </div>
</template>

<script setup>
import { postLoadAllTags } from "@/api/user/home";
import { onMounted, ref } from "vue";
import request from "@/utils/request"; //标签下的咨询信息
let tagsList = ref([]);
const selectedIndex = ref(0); // 默认第一个高亮
let newsTopList = ref([]);
let newQueryDto = ref({
  tagId: null,
});
// 获取所有标签 接口
async function loadAllTags() {
  let loadAllTags = await postLoadAllTags({});
  if (loadAllTags.data.code === 200) {
    tagsList.value = loadAllTags.data.data;
    tagsList.value.unshift({ name: "全部", id: null });
  }
}
// 咨询信息 全部 接口
const loadAllTopNews = async () => {
  newQueryDto.value = { tagId: null };
  let load = await request.post("/news/query", newQueryDto.value);
  if (load.data.code === 200) {
    newsTopList.value = load.data.data;
  } else {
    newsTopList.value = [];
  }
};

const onClick = (index) => {
  selectedIndex.value = index;
};

const currentPage4 = ref(4)
const handleSizeChange = (val) => {
}
const handleCurrentChange = (val) => {
}

onMounted(() => {
  loadAllTags();
  loadAllTopNews();
});
</script>

<style lang="scss" scoped>
.module1 {
  display: flex;
  // 样式穿透
  ::v-deep .el-empty {
    width: 1200px;
  }
}
.tag {
  // display: inline;
  font-size: 18px;
  padding: 5px 10px;
  margin: 25px 20px 25px 0;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 3px;
  border-radius: 5px;
}

.tag.active {
  background-color: #007bff; /* 或者其他你想要的高亮颜色 */
  color: white;
}
.empty-state {
  text-align: center;
  padding: 20px;
}

.news-item {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  // padding: 10px;
  box-sizing: border-box; /* 确保内边距不影响元素的总宽度 */
}

.news-image-wrapper {
  position: relative;
  width: 100px;
  height: 75px;
  margin-bottom: 10px;
}

.news-image-wrapper img {
  display: block; /* 移除底部间隙 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例填充容器 */
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.news-title {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.news-meta {
  font-size: 12px;
  color: #666;
}

.news-tags,
.news-time {
  margin-right: 10px; /* 为最后一个元素之前的间距做准备，但最后一个元素应使用 :last-child 选择器移除这个间距 */
}

.news-meta :last-child {
  margin-right: 0; /* 移除最后一个元素的右侧间距 */
}
</style>
